<template>
    <div class="page-container">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="分销产品" name="0" :class="[activeName == 0?'blueBg':'']"></el-tab-pane>
            <el-tab-pane label="分销员" name="1" :class="[activeName == 1?'blueBg':'']"></el-tab-pane>
            <el-tab-pane label="分销设置" name="2" :class="[activeName == 2?'blueBg':'']"></el-tab-pane>
        </el-tabs>
        <div class="container-item">
            <template v-if="activeName == 0">
                <goods></goods>
            </template>
            <template v-if="activeName == 1">
                <UserList></UserList>
            </template>
            <template v-if="activeName == 2">
                <el-form ref="ruleRefForm" :model="form" :rules="rules" size="small" label-width="150px">
                    <el-form-item label="客户保护期：" prop="protectTerm">
                        <el-radio-group v-model="radio" @change="selectType">
                            <el-radio :label="-1">临时</el-radio>
                            <el-radio :label="1">自定义</el-radio>
                            <el-radio :label="0">永久</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="保护天数：" v-if="radio == 1">
                        <el-input-number v-model="form.protectTerm" :min="1" />
                    </el-form-item>
                    <el-form-item label="自购返佣：" prop="autoRebate">
                        <el-switch v-model="form.autoRebate" />
                    </el-form-item>
                    <el-form-item label="分销商查看物流：" prop="clientLogistics">
                        <el-switch v-model="form.clientLogistics" />
                    </el-form-item>
                    <el-form-item label="分销申请审核：" prop="auditType">
                        <el-switch v-model="form.auditType" />
                    </el-form-item>
                    <el-form-item label="二级转一级申请审批：" prop="twoSaleAutoTop">
                        <el-radio-group v-model="form.twoSaleAutoTop">
                            <el-radio :label="0">发起申请</el-radio>
                            <el-radio :label="1">自动升级</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="通知类型：" prop="informType" v-if="form.auditType == 1">
                        <el-radio-group v-model="form.informType">
                            <el-radio :label="0">短信通知</el-radio>
                            <el-radio :label="1">邮箱通知</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="结算方式：" prop="settleType">
                        <el-radio-group v-model="form.settleType">
                            <el-radio :label="0">手动打款结算</el-radio>
                            <el-radio :label="1">系统自动结算</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="一级分佣：" prop="oneSaleMoney" >
                        <el-input-number v-model="form.oneSaleMoney" :precision="2" :min="0" />
                        （%）
                    </el-form-item>
                    <el-form-item label="二级分佣：" prop="twoSaleMoney">
                        <el-input-number v-model="form.twoSaleMoney" :precision="2" :min="0" />
                        （%）
                    </el-form-item>
                    <el-form-item label="单笔提现：" prop="minMoney">
                        金额不低于：
                        <el-input-number v-model="form.minMoney" :min="0" />
                        （元）
                    </el-form-item>
                    <el-form-item style="margin-top: 80px;">
                        <el-button type="primary" @click="submitForm(formRef)">提 交 设 置</el-button>
                    </el-form-item>
                </el-form>
            </template>
            
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { useSaleApi } from '/@/api/pms/sale/index'
import Goods from './components/goods.vue'
import UserList from './components/UserList.vue'
import { Message } from '@element-plus/icons-vue'

export default {
    name: 'setting',
    components: {
        Goods,
        UserList,
    },
    setup(props) {
        const saleApi = useSaleApi()
        const route = useRoute()
        const ruleRefForm = ref()
        const uploadBanner = ref()
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            activeName: '0',
            radio: -1, // 保护期
            select: 1, // 天数
            oldData: {}, // 暂存数据
            form: {
                protectTerm: -1, // 保护期
                autoRebate: 0, // 自购返佣
                clientLogistics: 0, // 分销商查看物流
                auditType: 0, // 分销商是否审核
                twoSaleAutoTop: 0, // 二级转一级审批
                informType: 0, // 通知类型 
                settleType: 0, // 结算方式
                minMoney: 0, // 单笔提现
                oneSaleMoney: 0.00, // 一级分佣
                twoSaleMoney: 0.00, // 二级分佣
            },
            rules: {}
        })
        onMounted(() => {
            getSetting()
        })
        // 获取分销设置
        const getSetting = () => {
            saleApi.getSetting({
                type: 1
            }).then(res => {
                if(res.data){
                    state.form = res.data
                    state.oldData = {...res.data}
                    state.radio = res.data.protectTerm > 0?1:res.data.protectTerm
                }
            })
        }
        // 切换步骤
        const handleClick = (val) => {

        }
        // 提交设置
        const submitForm = () => {
            console.log(state.form);
            console.log(state.oldData);
            if(Object.entries(state.form).toString() == Object.entries(state.oldData).toString()){
                ElMessage.warning('请修改原有数据在提交')
            }else{
                // 判断保护期是否变更
                if(state.form.protectTerm == state.oldData.protectTerm){
                    state.form.isNewProtect = 0
                }else{
                    state.form.isNewProtect = 1
                }
                saleApi.addSetting(state.form).then(res => {
                    ElMessage.success('修改成功')
                    delete state.form.isNewProtect
                })
            }
        }
        // 选择保护类型
        const selectType = (e) => {
            if(e != 1){
                state.form.protectTerm = e
            }
        }

        return {
            ...toRefs(state),
            handleClick,
            submitForm,
            selectType,
            getSetting,
        }
    },
    
}
</script>

<style scoped lang="scss">
    .container-item {
        height: 92vh;
		background: var(--next-color-white);
		padding: 15px;
		border: 1px solid var(--el-border-color-light);
		border-top: none;
        margin-top: -15px;

		
	}

    .blueBg{
        background: blue;
    }
</style>